import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import "./IncomeDetail.scss";
import { ListView } from "antd-mobile";
import * as ReactDOM from "react-dom";
import { channelCode } from "../../../config/Config";
import yhTools from "../../../tools/yh";
import iconArrowDown from "../../../images/imageXHB/icon/icon-arrow-down.png";
import iconArrowUp from "../../../images/imageXHB/icon/icon-arrow-up.png";

class IncomeDetail extends Component {
	constructor(props, ...args) {
		super(props, ...args);

		const dataSource = new ListView.DataSource({
			rowHasChanged: (row1, row2) => row1 !== row2
		});
		this.state = {
			productDetail: this.props.match.params.productDetail,
			tradeNumber: this.props.match.params.tradeNumber,
			topData: {
				totalProfit: "0.00"
			},
			profitDetails: [],
			dataSource: dataSource,
			hasMore: true,
			isLoading: false,
			height: (document.documentElement.clientHeight * 3) / 4,
			loadStatus: "1"
		};
		this.pageSize = 20; // 收益明细每页获取条数
		this.pageIndex = 1; // 收益明细分页索引
	}

	componentDidMount() {
		this.getFinanceProfitDetails();
	}
	/**获取总额、分页列表 */
	getFinanceProfitDetails() {
		const hei =
			document.documentElement.clientHeight -
			ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
		let objs = {
			url: "/fm/financeProfitDetails",
			params: {
				channelCode: channelCode,
				pageIndex: this.pageIndex + "",
				pageSize: this.pageSize + "",
				type: "2",
				tradeNumber: this.props.match.params.tradeNumber
			}
		};
		this.setState({
			isLoading: true
		});
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const { totalProfit, profitDetails, totalCount } = res.data;
				let newProfitDetails = [...this.state.profitDetails, ...profitDetails];

				this.setState({
					topData: {
						totalProfit
					},
					profitDetails: newProfitDetails,
					height: hei,
					hasMore: newProfitDetails.length < totalCount,
					isLoading: false
				});
			} else {
				this.setState({
					isLoading: false,
					hasMore: false
				});
			}
		});
	}

	/**页面滑动加载更多 */
	onEndReached = () => {
		if (this.state.isLoading || !this.state.hasMore) {
			return;
		}
		this.pageIndex += 1;
		this.getFinanceProfitDetails();
	};

	render() {
		let { topData, productDetail } = this.state;
		const renderHeader = () => (
			<div className="header-div">
				<div className="item-1">累计收益：</div>
				<div className="item-2">{topData.totalProfit}元</div>
			</div>
		);
		const row = (rowData, sectionID, rowID) => {
			return (
				<div>
					<div className="item">
						<div
							className="line-1"
							onClick={
								rowData.type === "2" ? null : this.itemClick.bind(this, rowID)
							}
						>
							<div className="left-d">
								{rowData.type === "2"
									? rowData.tradeDes
									: rowData.aheadProfitDes}
							</div>
							<div className="right-d">
								¥
								{rowData.type === "2"
									? rowData.profitAmout
									: productDetail == "B"
									? rowData.aheadProfitAmout
									: rowData.huoQiProfitAmout}
							</div>
							{rowData.type == "1" && productDetail == "B" && (
								<div id={"arrow" + rowID} className="arrow"></div>
							)}
						</div>
						<div className="line-2">
							<div className="left-d">{rowData.tradeTime}</div>
							<div className="right-d"></div>
						</div>
					</div>
					{rowData.type == "1" && productDetail == "B" && (
						<div
							id={"c-g" + rowID}
							className="c-g-dis"
							style={{ display: "none" }}
						>
							<div className="c-g">
								<div className="line-1">
									<div className="left-d">{rowData.huoQiTradeDes}</div>
									<div className="right-d">¥{rowData.huoQiProfitAmout}</div>
								</div>
								<div className="line-2">
									<div className="left-d">{rowData.tradeTime}</div>
									<div className="right-d"></div>
								</div>
							</div>
							{rowData.daoKouTradeDes && (
								<div className="c-g">
									<div className="line-1">
										<div className="left-d">{rowData.daoKouTradeDes}</div>
										<div className="right-d">¥{rowData.daoKouProfitAmout}</div>
									</div>
									<div className="line-2">
										<div className="left-d">{rowData.tradeTime}</div>
										<div className="right-d"></div>
									</div>
								</div>
							)}
						</div>
					)}
				</div>
			);
		};
		const _pageParams = {
			header: {
				title: "收益明细"
			},
			cacheLifecycles: this.props.cacheLifecycles,
			history: this.props.history,
			loadStatus: this.state.loadStatus
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<div>
					<ListView
						className="income-details-list"
						ref={el => (this.lv = el)}
						dataSource={this.state.dataSource.cloneWithRows(
							this.state.profitDetails
						)}
						renderFooter={() => (
							<div className="bill_record_listview_foot">
								{this.state.hasMore ? "加载中" : "没有更多了"}
							</div>
						)}
						renderRow={row}
						// renderSeparator={separator}
						style={{
							height: this.state.height,
							overflow: "auto"
						}}
						renderHeader={renderHeader}
						initialListSize={20}
						onEndReached={this.onEndReached}
					/>
				</div>
			</MainLayout>
		);
	}
	itemClick(key) {
		if (this.state.productDetail === "A") {
			return;
		}
		let str = "c-g" + key;
		let str2 = "arrow" + key;
		let display = document.getElementById(str).style.display;
		if (display == "none") {
			document.getElementById(str).style.display = "block";
			document.getElementById(
				str2
			).style.backgroundImage = `url(${iconArrowUp})`;
		} else {
			document.getElementById(str).style.display = "none";
			document.getElementById(
				str2
			).style.backgroundImage = `url(${iconArrowDown})`;
		}
	}
}

export default IncomeDetail;
